<script setup lang="ts">
import Table from "@/components/Table.vue";

import { reactive, ref, watch, computed } from 'vue'

const data = reactive(
    {
        ranklist: [
            {
                id: 1,
                name: '汪凯',
                progress: '100%',
                score: 98,
                rank: 1
            },
            {
                id: 2,
                name: '杜振宇',
                progress: '97%',
                score: 95,
                rank: 2
            }, {
                id: 3,
                name: '何灵灵',
                progress: '94%',
                score: 95,
                rank: 3
            }, {
                id: 4,
                name: '杨科',
                progress: '85%',
                score: 85,
                rank: 4
            }, {
                id: 5,
                name: '麦著胜',
                progress: '75%',
                score: 86,
                rank: 5
            },
            {
                id: 6,
                name: '方卓彬',
                progress: '65%',
                score: 75,
                rank: 6
            },
            {
                id: 7,
                name: '李彤博',
                progress: '55%',
                score: 65,
                rank: 7
            }, {
                id: 8,
                name: '孙子峻',
                progress: '45%',
                score: 45,
                rank: 8
            }
        ],
        members: [
            {
                id: 1,
                name: '杨科',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '1',
            }, {
                id: 2,
                name: '汪凯',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '0',
            }, {
                id: 3,
                name: '杜振宇',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '1',
            }, {
                id: 4,
                name: '张渝鹏',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '1',
            }, {
                id: 5,
                name: '何士林',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '0',
            }, {
                id: 5,
                name: '麦著胜',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '1',
            }, {
                id: 6,
                name: '郭树鑫',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '0',
            }, {
                id: 7,
                name: '李镇鹏',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '0',
            }, {
                id: 8,
                name: '林泽凡',
                img: 'https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg',
                online: '1',
            },
        ]
    }
)

</script>
    
<template>
    <div class="container">
        <div class="left">
            <Table :ranklist="data.ranklist" bgColor="#e3edf7" style="width:100%;height:100%;"></Table>
            <!-- <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="100" />
            </div> -->
        </div>
        <div class="right">
            <div class="header">
                <span>在线</span>
                <span class="circle1"></span>
                <span>离线</span>
                <span class="circle2"></span>
            </div>
            <div class="item" v-for="item in data.members" :key="item.id">
                <img src="https://cdn-media-1.freecodecamp.org/images/0*xkJgg-6HskYrQ3N7.jpeg" alt="">
                <span>{{ item.name }}</span>
                <span :class="item.online == '1' ? 'circle1' : 'circle2'"></span>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    @include flex();

    .left {
        width: 80%;
        height: 100%;
    }

    .right {
        width: 20%;
        height: 100%;
        border-left: 1px solid rgba(113, 110, 182, 0.15);

        .header {
            width: 100%;
            height: 51px;
            background-color: #716eb6;
            background-color: $theme-color;
            @include flex();
            color: #fff;
        }

        .circle1 {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #55f696;
        }

        .circle2 {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #c1c1c1;
        }

        .item {
            @include flex();
            margin: 10px 0;

            img {
                height: 35px;
                width: 35px;
                border-radius: 50%;
            }
        }

        .item:hover {
            background-color: rgba(113, 110, 182, 0.15);
        }

    }
}
</style>